<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title th:replace="common/base::pagetitle"></title>
	<link th:replace="common/base::static"/>
	<link rel="stylesheet" th:href="@{/static/plugins/easyui/themes/material/easyui.css}">
	<link rel="stylesheet" th:href="@{/static/plugins/easyui/themes/icon.css}">
	<link rel="stylesheet" th:href="@{/static/css/wlb-treegrid.css}">
	<link rel="stylesheet" th:href="@{/static/css/element.ui.2.13.2.index.css}">
	<style type="text/css">
		[v-cloak]{display: none}
		.bank{
			font-family: "华文行楷";
			font-size: 30px;
		}
	</style>
</head>
<body style="background-color: #f2f2f2;">

<div id="creditApply" v-cloak>
	<div style="padding-left: 1rem;margin-top: 1rem" class="demo-image__preview">
		<div  v-for="item in deptList" style="float: left;z-index:11;position: relative;margin-left: 3rem;">
			<h2 class="bank" @click="querySupplierBank(item.id)" style="cursor:pointer;font-size: 25px">
				{{item.name}}
			</h2>
			<!--			<el-image-->
			<!--					  style="width: 140px;height: 64px;margin-left: 15px;cursor:pointer;"-->
			<!--					  title="查看匹配关系"-->
			<!--					  @click="querySupplierBank(item.id)"-->
			<!--					  :src="item.busLicImageUrl"-->
			<!--					  >-->
			<!--			</el-image>-->
			<br />
			<el-button @click="queryCreditInfo(item.id)"  size="small" type="success"><i class="el-icon-edit-outline"></i> 申请授信</el-button>
		</div>
	</div>

	<!-- 与银行匹配关系弹出框 -->
	<div>
		<el-dialog
				title="与银行匹配关系"
				:visible.sync="dialogBankVisible"
				width="80%"
				height="100%"
		>
			<el-table
					:data="supplierList"
					style="width: 100%"
					border
					:header-cell-style="{background:'#F5F7FA',color:'#606266'}"
					height="250">
				<el-table-column
						fixed
						label="企业名称"
						align= "center"
				>
					<template slot-scope="scope">{{ scope.row.compName }}</template>
				</el-table-column>
				<el-table-column
						fixed
						label="工商注册号"
						align= "center"
				>
					<template slot-scope="scope">{{ scope.row.comCerNo }}</template>
				</el-table-column>
				<el-table-column
						fixed
						label="公司地址"
						align= "center"
				>
					<template slot-scope="scope">{{ scope.row.comAddress }}</template>
				</el-table-column>
				<el-table-column
						fixed
						label="营业执照"
						align= "center"
				>
					<template slot-scope="scope">
						<el-image
								style="width: 140px; height: 64px"
								:src="scope.row.busLicImageUrl"
								fit="fit"
						>
						</el-image>
					</template>
				</el-table-column>
				<el-table-column
						fixed
						label="管理人姓名"
						align= "center"
						width="100"
				>
					<template slot-scope="scope">{{ scope.row.admName }}</template>
				</el-table-column>
				<el-table-column
						fixed
						label="管理人手机号"
						align= "center"
				>
					<template slot-scope="scope"><i class="el-icon-phone"></i> {{ scope.row.admMobPhone }}</template>
				</el-table-column>
				<el-table-column
						fixed
						label="匹配时间"
						align= "center"
				>
					<template slot-scope="scope">{{ scope.row.createDate }}</template>
				</el-table-column>
			</el-table>
			<span slot="footer" class="dialog-footer">
      </span>
		</el-dialog>
	</div>

	<!-- 申请授信弹出框 -->
	<div>
		<el-dialog
				title="申请授信"
				:visible.sync="creditVisible"
				width="50%"
				height="100%"
		>
			<div style="margin-left: 5rem">
				<el-form ref="creditCoreBankForm" :model="creditCoreBankForm"  label-position="top" size="mini">
					<el-form-item label="机构名称">
						<el-input v-model="creditCoreBankForm.compName" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="组织代码">
						<el-input v-model="creditCoreBankForm.comCerNo" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="税务登记号">
						<el-input v-model="creditCoreBankForm.registrationNo" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="注册资金">
						<el-input v-model="creditCoreBankForm.registryAmount" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="资产总额">
						<el-input v-model="creditCoreBankForm.businessTotalAmount" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="年销售额">
						<el-input v-model="creditCoreBankForm.businessSalesAmount" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="企业法人">
						<el-input v-model="creditCoreBankForm.legalName" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="法人证件号">
						<el-input v-model="creditCoreBankForm.legalNo" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="管理人姓名">
						<el-input v-model="creditCoreBankForm.admName" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="管理人手机号">
						<el-input v-model="creditCoreBankForm.admMobPhone" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="在职人数">
						<el-input v-model="creditCoreBankForm.payrolls" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="经营范围（多个用逗号隔开）">
						<el-input v-model="creditCoreBankForm.businessScope" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="公司成立日期">
						<el-date-picker
								v-model="creditCoreBankForm.setupDate"
								type="date"
								value-format="yyyy-MM-dd"
								placeholder="选择日期">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="公司地址">
						<el-input v-model="creditCoreBankForm.comAddress" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="供应商类型">
						<el-radio-group v-model="creditCoreBankForm.supplierType">
							<el-radio  label="1" >材料供应商</el-radio>
							<el-radio  label="0" >其他</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="">
						<el-checkbox v-model="creditCoreBankForm.checked">同意授权平台获取历史交易数据</el-checkbox>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="creditVisible = false">取 消</el-button>
				<el-button type="primary" @click="onSubmit">确 定</el-button>
			</div>
			</span>
		</el-dialog>
	</div>


</div>




<div id="kPage" class="layui-fluid" style="padding: 0">
	<div class="layui-row">
		<!-- 主要内容块 -->
		<div class="layui-col-md12" id="kMainContentCol">
			<div class="layui-fluid wlb-fluid-padding15">
				<div class="layui-card">
					<form>
						<div class="layui-form layui-card-header wlb-card-header-auto">
							<div class="layui-inline">
								<button class="layui-btn " lay-submit="" lay-filter="kTableSearchFilter">
									<i class="layui-icon layui-icon-search"></i>
								</button>
								<button class="layui-btn " type="reset">
									<i class="layui-icon layui-icon-refresh-1"></i>
								</button>
							</div>
						</div>
					</form>

					<div class="layui-card-body">
						<table id="kContentTable" lay-filter="kContentTable"></table>
					</div>
				</div>

			</div>
		</div>
	</div>
</div>

<script th:replace="common/base::context"></script>
<script th:replace="common/base::mainjs"></script>
<script th:src="@{/static/plugins/easyui/easyloader.js}"></script>


<script type="text/html" id="statusTpl">
	{{# if(d.status === '0') { }}
	<span class="layui-badge layui-bg-green">待处理</span>
	{{#  } else if(d.status === '1') { }}
	<span class="layui-badge layui-bg-orange">平台审核成功</span>
	{{#  } else if(d.status === '2') { }}
	<span class="layui-badge layui-bg-green">平台审核失败</span>
	{{#  } else if(d.status === '4') { }}
	<span class="layui-badge layui-bg-green">行内审核通过</span>
	{{#  } else if(d.status === '5') { }}
	<span class="layui-badge layui-bg-green">行内审核拒绝</span>
	{{# } else { }}
	<span class="layui-badge layui-bg-gray">其他</span>
	{{# } }}
</script>

<!--表格行工具栏模板-->
<script type="text/html" id="rowToolbarTpl">
	<!--	<a class="layui-btn layui-bg-orange layui-btn-xs" data-event="queryOrgRelations" onclick="active.bankInfo(this)" data-id="{{d.id}}" data-orgId="{{d.orgId}}"><i class="layui-icon layui-icon-cols"></i>申请授信</a>-->
	<a class="layui-btn layui-btn-normal layui-btn-xs" data-event="edit" onclick="active.info(this)" data-id="{{d.id}}" data-supplierId="{{d.compId}}" data-status = "{{d.status}}"><i class="layui-icon layui-icon-edit"></i>详情</a>
</script>
<script th:src="@{/static/js/schema/vue.2.6.12.js}"></script>
<script th:src="@{/static/js/schema/element.ui.index.2.13.2.js}"></script>
<script type="text/javascript" th:inline="none">

	var active;
	window.layui.use(['element', 'form', 'layer', 'table', 'laytpl'], function () {
		var elemet = layui.element, form = layui.form, layer = layui.layer, table = layui.table;
		var tableId = 'kContentTable';
		var compType = 0;

		// 实例化table
		var tableIns = table.render($.extend(config.layui.table, {
			elem: '#' + tableId
			,response:{dataName:"records",countName: 'total'}
			, url: api.credit.creditListData + "?compType=" + compType //数据接口
			, toolbar: '#headToolbarTpl'
			, cols: [[ //表头
				{type: 'checkbox', fixed: 'left'}
				, {field: 'compName', title: '申请人', width: 200, fixed: false}
				, {field: 'bankName', title: '申请行', width: 150, fixed: false}
				, {field: 'createDate', title: '申请时间', width: 180, fixed: false}
				, {field: 'comCerNo', title: '工商注册号', width: 150, fixed: false}
				// , {field: 'applyAmount', title: '申请授信额度', width: 150, fixed: false}
				, {field: 'status', title: '审核状态',  width: 130,align: 'center', templet: '#statusTpl',  fixed: false}
				, {field: '', title: '操作', width: 150, fixed: 'right', templet: '#rowToolbarTpl'}
			]]
		}));
		var area = ['450px', '530px'];

		// 监听表格头部事件
		table.on('toolbar(' + tableId + ')', function (obj) {
			var checkStatus = table.checkStatus(obj.config.id);
			var checkData = checkStatus.data; // 得到选中的数据
			switch (obj.event) {
				case 'add':
					var id = 0;
					id = id || 0;
					var level = 0

					layer.open({
						type: 2
						, title: '添加'
						, content: api.sys.deptEditView + '?parentId=' + id + '&type=' + level
						, maxmin: true
						, area: area   // 宽高
						, btn: ['确定', '取消']
						, yes: function (index, layero) {
							//点击确认触发 iframe 内容中的按钮提交
							var submit = layero.find('iframe').contents().find("#kFormSubmit");
							submit.click();
						}
					});
					break;
				case 'batchdel':
					if (checkData.length === 0) {
						return wlbKit.warningMsg('请选择数据');
					}
					layer.confirm('确定删除吗？', function (index) {

						var ids = [];
						var orgIds = [];
						$.each(checkData, function (i, n) {
							ids[i] = n.id;
							orgIds[i] = n.orgId
						});

						//执行 Ajax 后重载
						$.ajax({
							type: req.type.post,
							url: api.sys.deptRmBatch,
							data: {ids: ids.toString(),orgIds:orgIds.toString()},
							success: function (r) {
								if (r.code === req.status.ok) {
									table.reload(tableId);
									wlbKit.sucessMsg('已删除');
								} else {
									wlbKit.errorMsg(r.msg);
								}
							}
						});

					});
					break;
			}
		});


		// 监听事件
		active = {
			info: function (that) {
				var supplierId = $(that).data('supplierid');
				var status = $(that).data('status');
				var auditId = $(that).data('id');
				// 1详情 2审核
				var type = 1;
				var index = layer.open({
					type: 2
					, title: '详情'
					, content: api.credit.creditAuditView + "?supplierId=" + supplierId +"&type=" + type + "&auditId=" + auditId+"&status=" + status
					, maxmin: true
					, area: area   // 宽高
				});
				// layer.full(index);

			},

		};

		wlbKit.activeInit(active);

		$(window).resize(function () {
			treeGridKit.fitRightFrozenCol(tableId);
		});

		// 列格式化函数
		var formatter = {
			rowToolbar: function (value, row, index) {
				return wlbKit.renderTpl('rowToolbarTpl', row);
			},
			status: function (value, row, index) {
				return wlbKit.renderTpl('statusTpl', row);
			},
			type: function (value, row, index) {
				return wlbKit.renderTpl('typeTpl', row);
			},
			source: function (value, row, index) {
				return wlbKit.renderTpl('sourceTpl', row);
			}
		};

		// 监听查询
		form.on('submit(kTableSearchFilter)', function (obj) {
			var params = obj.field;
			log('seach=', params); //

			tableIns.reload({
				where: params,
				page: {curr: 1}
			});
			return false;

		});

		// 绑定监听回车事件
		wlbKit.bindEnterEventForLayuiForm();

	});

	var vm = new Vue({
		el: '#creditApply',
		data(){
			return{
				deptList:[], // 机构列表
				supplierList:[], // 供应商与银行匹配关系
				creditCoreBankForm:{
					checked:false,
					bankId:"",
					supplierId:"",
				}, // 供应商基本信息
				dialogBankVisible:false, // 与银行匹配关系弹出框
				creditVisible:false, // 申请授信弹出框
				urlList: [
					'/static/image/bank_logo/中国民生银行.png',
					'/static/image/bank_logo/中国建设银行.png',
					'/static/image/bank_logo/中国工商银行.png',
					'/static/image/bank_logo/中国邮政.png',
					'/static/image/bank_logo/招商银行.png',
					'/static/image/bank_logo/广发银行.png',
					'/static/image/bank_logo/交通银行.png',
					'/static/image/bank_logo/浦发银行.png',
					// '/static/image/bank_logo/北京银行.png',
					// '/static/image/bank_logo/青岛银行.png',
				], // 图片集合
				srcList: [
					'/static/image/bank_logo/中国民生银行.png',
					'/static/image/bank_logo/中国建设银行.png',
					'/static/image/bank_logo/中国工商银行.png',
					'/static/image/bank_logo/中国邮政.png',
					'/static/image/bank_logo/招商银行.png',
					'/static/image/bank_logo/广发银行.png',
					'/static/image/bank_logo/交通银行.png',
					'/static/image/bank_logo/浦发银行.png',
					// '/static/image/bank_logo/北京银行.png',
					// '/static/image/bank_logo/青岛银行.png',
				] // 缩略图集合
			}
		},
		created() {
			this.queryDeptList();
		},
		methods: {

			// 申请授信
			onSubmit(){
				var vue = this;
				if(!vue.creditCoreBankForm.checked){
					wlbKit.warningMsg('请同意授权平台获取历史交易数据');
					return;
				}
				var url = 'credit/applyAudit';
				//提交 Ajax 成功后，关闭当前弹层并重载表格
				$.ajax({
					type: req.type.post,
					url: BASE_WEB + url,
					data: this.creditCoreBankForm,
					async: false,
					success: function (r) {
						log("msg",r.msg);
						if (r.code === req.status.ok) {
							vue.creditVisible = false; // 关闭弹出框
							wlbKit.sucessMsg("申请成功！请等待审核");
							window.location.href = api.credit.creditApplyIndex;
						} else {
							wlbKit.errorMsg(r.msg);
						}
					}
				});
			},

			// 申请授信弹出框查询供应商信息
			queryCreditInfo(id){
				var vue = this;
				$.ajax({
					type: req.type.get,
					url: api.credit.coreBankInfo +"?id="+id,
					async: false,
					success: function (r) {
						if (r.code === req.status.ok) {
							vue.creditCoreBankForm = r.data.creditCoreBankInfo;
							vue.creditCoreBankForm.bankId = r.data.bankId;
							vue.creditCoreBankForm.supplierId = r.data.supplierId;
							console.log(vue.creditCoreBankForm)
							vue.creditVisible = true;
						} else {
							wlbKit.errorMsg(r.msg);
						}
					}
				});
			},

			// 查询机构列表
			queryDeptList(){
				var vue = this;
				let type = 2;
				$.ajax({
					type: req.type.get,
					url: api.sys.deptBankData+"?type="+type,
					async: false,
					success: function (r) {
						if (r.code === req.status.ok) {
							vue.deptList = r.data;
						} else {
							wlbKit.errorMsg(r.msg);
						}
					}
				});
			},

			// 查询银行与核心企业匹配关系
			querySupplierBank(compId){
				var vue = this;
				$.ajax({
					type: req.type.get,
					url: api.credit.supplierBankListData +"?compId=" + compId,
					async: false,
					success: function (r) {
						if (r.code === req.status.success) {
							vue.supplierList = r.items;
							vue.dialogBankVisible = true;
						} else {
							wlbKit.errorMsg(r.msg);
						}
					}
				});

			},

			bankInfo(id){
				window.location.href = api.credit.coreBankInfo +"?id="+id;
			},

			layUiInit(){}
		}
	});
</script>

</body>
</html>
